<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import applyForm from "./components/applyForm.vue";
import manageTable from "./components/manageTable.vue";
import PageWrapper from "@/components/Wrapper";
import { getBoundPageList } from "@/api/bound";

defineOptions({
  name: "boundSearch"
});

const tableHeight = ref(0);
const pageWrapperRef = ref(null);
// 分页器功能
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
});
let tableData = ref<[]>([]);
const applyFormRef = ref(null);

onMounted(() => {
  initData();
  pageWrapperRef.value.initData();
});

const initData = () => {
  getBoundPageList(
    Object.assign(
      {
        size: pagination.size,
        current: pagination.current
      },
      { ...applyFormRef.value.getForm() }
    )
  ).then(res => {
    pagination.current = res.data.current;
    pagination.total = res.data.total;
    tableData.value = res.data.records;
  });
};

/**
 * 分页器改变事件
 * @param value 当前页
 * @param pageSize 每页大小
 */
const handleCurrentChange = (value?: number, pageSize?: number) => {
  pagination.current = value || 1;
  pagination.size = pageSize || 20;
  initData();
};
</script>

<template>
  <div class="main_box">
    <PageWrapper ref="pageWrapperRef" v-model:height="tableHeight">
      <template #header>
        <applyForm ref="applyFormRef" @handle-search="initData" />
      </template>
      <template #content>
        <div class="main">
          <manageTable
            :tableHeight="tableHeight"
            :table-data="tableData"
            :pagination="pagination"
          />
          <div v-if="pagination.total > pagination.size" class="pagination">
            <el-pagination
              v-model:current-page="pagination.current"
              v-model:page-size="pagination.size"
              class="el-pagination"
              background
              hide-on-single-page
              layout="prev, pager, next"
              :total="pagination.total"
              @change="handleCurrentChange"
            />
          </div>
        </div>
      </template>
    </PageWrapper>
  </div>
</template>

<style lang="scss" scoped>
.form {
  .form_col {
    display: flex;
    flex-direction: column;
  }
}
.titleText {
  font-size: 16px;
  font-weight: 700;
  color: #282828;
}
</style>
